<template>
	<div id="news_detail" class="table" v-if="formVisible">
		<div class="container">
			<div style="text-align:center;">
				<div style="text-align:left;margin:0 auto;">
					<el-form :model="modelData" label-width="120px" class="demo-ruleForm">
						<div style="text-align:left;margin:0 auto;">
							<div class="rows">
								<el-form-item label="封面">
									<el-upload class="avatar-uploader" width="100" :limit='1' name="file" :action="globaldata.uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
										<img v-if="modelData.articleCover" :src="globaldata.imgBaseUrl+modelData.articleCover" class="avatar">
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
								</el-form-item>
							</div>
							<div class="rows">
								<el-form-item class="text_align" label="标题：">
									<el-input v-model="modelData.articleTitle" :maxlength="30"></el-input>
								</el-form-item>
								<el-form-item label="领域：">
									<el-select v-model="modelData.city" placeholder="请选择">
										<el-option v-for="(value,key) in citys" :key="key" :label="value" :value="key"></el-option>
									</el-select>
								</el-form-item>
							</div>
							<el-form-item class="role_area" label="标签：">
								<el-checkbox-group v-model="selectedtags" size="mini">
									<el-checkbox v-for="(value,key) in tags" :key="key" :label="key">{{value}}</el-checkbox>
								</el-checkbox-group>
							</el-form-item>
							<el-form-item label="资讯内容:">
								<UE :defaultMsg="modelData.articleContent" id="ue1" ref="ue"></UE>
							</el-form-item>
						</div>
					</el-form>
				</div>
			</div>
			<div style="clear:both;"></div>
			<div slot="footer" class="dialog-footer my_flex_right">
				<el-button @click="close()">返回</el-button>
				<el-button type="primary" @click="save()">保存</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import UE from '../../common/wangEditor.vue';
	import service from '@/js/services/newsservice.js';
	export default {
		props: {
			id: 0,
			parentDetailData: {}
		},
		components: {
			UE
		},
		data() {
			return {
				modelData: {},
				formVisible: false,
				imageUrl: '',
				citys:[],
				tags:[],
				selectedtags:[]
			}
		},
		watch: {
			formVisible(newVal, oldVal) {
				if(newVal) { //详情页弹出
					let self = this;
					this.resetData();
					if(this.id) {
						service.getModelData(this);
					}
					let param_arr = ['project_tag','city']; //所属行业
					this.tool.getDirByKey(this, param_arr).then(() => {
						self.tags = self.$store.state.project_tag;
						self.citys = self.$store.state.city;
					});
				}
			},
		},
		methods: {
			resetData() {
				this.modelData = {
					articleCategoryId: null,
					articleTitle: null,
					articleContent: null,
					articleCover: null,					
				}
			},
			show() {
				this.formVisible = true;
			},
			save() {
				service.handleSave(this);
			},
			close() {
				this.parentDetailData.isTabelShow = true;
				this.formVisible = false;
			},
			handleAvatarSuccess(res, file) {
				let data = res.data;
				if(res.code == 1) {
					this.modelData.articleCover = data.id;

				} else {
					this.$message({
						message: res.msg,
						type: 'error'
					})
				}
			},			
			beforeAvatarUpload(file) {
				return this.validatetool.validateImgSizeAndType(this, file);
			}
		},

	}
</script>